import React from 'react';
import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
import Icon from '@ant-design/icons';

const SearchSvg = () => (
  <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M8.51033 9.21863C7.69189 9.8814 6.64943 10.2784 5.51424 10.2784C2.88302 10.2784 0.75 8.14541 0.75 5.51421C0.75 2.88301 2.88302 0.75 5.51424 0.75C8.14545 0.75 10.2785 2.88301 10.2785 5.51421C10.2785 6.64942 9.88143 7.69189 9.21864 8.51034L12.75 12.0417L12.0417 12.75L8.51033 9.21863ZM9.27679 5.51421C9.27679 3.43623 7.59224 1.75168 5.51424 1.75168C3.43623 1.75168 1.75168 3.43623 1.75168 5.51421C1.75168 7.59219 3.43623 9.27674 5.51424 9.27674C7.59224 9.27674 9.27679 7.59219 9.27679 5.51421Z"
      fill="#616C81"
    />
  </svg>
);

const LargeSearchSvg = () => (
  <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M12.2655 13.3279C11.0378 14.3221 9.47414 14.9176 7.77135 14.9176C3.82453 14.9176 0.625 11.7181 0.625 7.77132C0.625 3.82451 3.82453 0.625 7.77135 0.625C11.7182 0.625 14.9177 3.82451 14.9177 7.77132C14.9177 9.47412 14.3221 11.0378 13.328 12.2655L18.625 17.5625L17.5626 18.625L12.2655 13.3279ZM13.4152 7.77132C13.4152 4.65434 10.8884 2.12752 7.77135 2.12752C4.65435 2.12752 2.12752 4.65434 2.12752 7.77132C2.12752 10.8883 4.65435 13.4151 7.77135 13.4151C10.8884 13.4151 13.4152 10.8883 13.4152 7.77132Z"
      fill="white"
      fillOpacity="0.36"
    />
  </svg>
);

const SearchOutlined = (
  props: Partial<CustomIconComponentProps> & { onClick?: () => void; type?: 'large' | 'middle' }
) => {
  const { type } = props;
  return <Icon component={type && type === 'large' ? LargeSearchSvg : SearchSvg} {...props} />;
};

export default SearchOutlined;
